<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="x-UA-Compatible" content="ie=Edge">
   	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Crafty - Text Sprites</title>
	<link rel="shortcut icon" href="../favicon.ico">
	<link type="text/css" rel="stylesheet" href="../craftyjs-site.css" />
</head>
<body>
	<div id = "header-background"> </div>
	<div id = "page-frame">
	<div id="header">
		<nav class="navbar">
  			<div class="container-fluid">
  				<div class="navbar-header">
  					<a class="navbar-brand" href="../"> <img class="logo" src="../images/text-logo.png" /> </a>
  					
				</div>
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="../">首页</a></li>
						<li><a href="../getting-started/">快速开始</a></li>
						<li><a href="../documentation/">文档</a></li>
						<li><a href="../api/">API</a></li>
						<li><a href="../components/">组件</a></li>
						<li class="emph"><a href="../#install">下载</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>


	<div id="main">
		<div id="content" class="container">
			

<div id='doc-nav'>
	<ul id='doc-level-one'>
		<li>
			Text
			<ul>
				<li><a href='../cookbook/text-sprite.html'>Text Sprites</a></li>
			</ul>
		</li>
	</ul>
</div>
<div id='doc-content'>

<h2> Text Sprites </h2>
<p>If you want to be more creative about the fonts in your game you can create a sprite sheet of your font like this</p>
<p> <img src="examples/textsprite/font-hand-24x32.png" alt="examples/textsprite/font-hand-24x32.png"></p>
<p>and chop it up in Crafty like this </p>
<pre><code>Crafty.init();

Crafty.sprite(<span class="hljs-number">24</span>,<span class="hljs-number">32</span>,<span class="hljs-string">"http://opengameart.org/sites/default/files/font-hand-24x32.png"</span>,
              {
                  <span class="hljs-attr">EMPTY</span>:[<span class="hljs-number">0</span>,<span class="hljs-number">0</span>],
                  <span class="hljs-attr">A</span>:[<span class="hljs-number">1</span>,<span class="hljs-number">2</span>],
                  <span class="hljs-attr">B</span>:[<span class="hljs-number">2</span>,<span class="hljs-number">2</span>],
                  <span class="hljs-attr">C</span>:[<span class="hljs-number">3</span>,<span class="hljs-number">2</span>],
                  <span class="hljs-attr">D</span>:[<span class="hljs-number">4</span>,<span class="hljs-number">2</span>],
                  <span class="hljs-attr">E</span>:[<span class="hljs-number">5</span>,<span class="hljs-number">2</span>],
                  <span class="hljs-attr">F</span>:[<span class="hljs-number">6</span>,<span class="hljs-number">2</span>],
                  <span class="hljs-attr">G</span>:[<span class="hljs-number">7</span>,<span class="hljs-number">2</span>],
                  <span class="hljs-attr">H</span>:[<span class="hljs-number">8</span>,<span class="hljs-number">2</span>],
                  <span class="hljs-attr">I</span>:[<span class="hljs-number">9</span>,<span class="hljs-number">2</span>],
                  <span class="hljs-attr">J</span>:[<span class="hljs-number">10</span>,<span class="hljs-number">2</span>],
                  <span class="hljs-attr">K</span>:[<span class="hljs-number">11</span>,<span class="hljs-number">2</span>],
                  <span class="hljs-attr">L</span>:[<span class="hljs-number">12</span>,<span class="hljs-number">2</span>],
                  <span class="hljs-attr">M</span>:[<span class="hljs-number">13</span>,<span class="hljs-number">2</span>],
                  <span class="hljs-attr">N</span>:[<span class="hljs-number">14</span>,<span class="hljs-number">2</span>],
                  <span class="hljs-attr">O</span>:[<span class="hljs-number">15</span>,<span class="hljs-number">2</span>],
                  <span class="hljs-attr">P</span>:[<span class="hljs-number">0</span>,<span class="hljs-number">3</span>],
                  <span class="hljs-attr">Q</span>:[<span class="hljs-number">1</span>,<span class="hljs-number">3</span>],
                  <span class="hljs-attr">R</span>:[<span class="hljs-number">2</span>,<span class="hljs-number">3</span>],
                  <span class="hljs-attr">S</span>:[<span class="hljs-number">3</span>,<span class="hljs-number">3</span>],
                  <span class="hljs-attr">T</span>:[<span class="hljs-number">4</span>,<span class="hljs-number">3</span>],
                  <span class="hljs-attr">U</span>:[<span class="hljs-number">5</span>,<span class="hljs-number">3</span>],
                  <span class="hljs-attr">V</span>:[<span class="hljs-number">6</span>,<span class="hljs-number">3</span>],
                  <span class="hljs-attr">W</span>:[<span class="hljs-number">7</span>,<span class="hljs-number">3</span>],
                  <span class="hljs-attr">X</span>:[<span class="hljs-number">8</span>,<span class="hljs-number">3</span>],
                  <span class="hljs-attr">Y</span>:[<span class="hljs-number">9</span>,<span class="hljs-number">3</span>]
              });

Crafty.c(<span class="hljs-string">"Char"</span>,{
    <span class="hljs-attr">init</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
        <span class="hljs-keyword">this</span>.addComponent(<span class="hljs-string">"2D,DOM"</span>).attr({<span class="hljs-attr">w</span>:<span class="hljs-number">24</span>,<span class="hljs-attr">h</span>:<span class="hljs-number">32</span>});
    }
});

Crafty.c(<span class="hljs-string">"SpriteText"</span>,{
    <span class="hljs-attr">init</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
        <span class="hljs-keyword">this</span>.addComponent(<span class="hljs-string">"2D,DOM"</span>);
    },
    <span class="hljs-attr">text</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">text</span>)</span>{
        <span class="hljs-keyword">var</span> c;
        <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i&lt;text.length;i++){
            c = Crafty.e(<span class="hljs-string">"Char"</span>,text.charAt(i).toUpperCase());
            c.shift(i*c.w);
            <span class="hljs-keyword">this</span>.attach(c);
        }
    }
});</code></pre>
<p>Then simply use the SpriteText component like this</p>
<pre><code><span class="hljs-keyword">var</span> text = Crafty.e(<span class="hljs-string">"SpriteText"</span>).text(<span class="hljs-string">"Crafty Roxx"</span>);</code></pre>
<p>And the result</p>
<iframe width="600" height="300" src="examples/textsprite/textsprite.html">
    This is an iframe. sorry.
</iframe>
</div>

			
		</div>
	</div>
	<div class="clearer"></div>
	<div id="footer">
		<div id="contact">
			<a href="https://groups.google.com/forum/#!forum/craftyjs">
				<img src="../images/google.png" />
				google groups</a>
			<a href="mailto:starwed@gmail.com">
				<img src="../images/email.png" />
				starwed@gmail.com</a>
			<a href="https://github.com/craftyjs/Crafty">
				<img src="../images/github.png" />
				github</a>
		</div>
		<ul>
			<li><a href="../">首页</a></li>
				<li><a href="../getting-started/">快速开始</a></li>
				<li><a href="../documentation/">文档</a></li>
				<li><a href="../api/">API</a></li>
				<li><a href="../components/">组件</a></li>
				<li class="emph"><a href="../#install">下载</a></li>
		</ul>
		<p>
			&copy; Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
		</p>
	</div>
</div>
</body>
</html>
